/* pages/article/articles.wxss */
/* pages/page2/page2.wxss */

.container {
  padding: 20rpx; /* 页面内边距 */
  background-color: #f9f9f9; /* 背景颜色 */
}

.article {
  background-color: #ffffff; /* 文章背景颜色 */
  padding: 20rpx; /* 文章内边距 */
  border-radius: 10rpx; /* 边角圆角 */
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.header {
  margin-bottom: 20rpx; /* 底部外边距 */
}

.title {
  font-size: 36rpx; /* 标题字体大小 */
  font-weight: bold; /* 标题字体加粗 */
  margin-bottom: 10rpx; /* 标题底部外边距 */
  color: #333333; /* 标题字体颜色 */
}

.details {
  display: flex; /* 使用 flex 布局 */
  justify-content: space-between; /* 两端对齐 */
  font-size: 24rpx; /* 详情字体大小 */
  color: #999999; /* 详情字体颜色 */
}

.cover {
  width: 100%; /* 宽度 100% */
  margin: 20rpx 0; /* 上下外边距 */
  display: block; /* 块级显示 */
  border-radius: 10rpx; /* 边角圆角 */
}

.content {
  font-size: 32rpx; /* 内容字体大小 */
  line-height: 1.6; /* 行高 */
  color: #444444; /* 内容字体颜色 */
  margin-bottom: 20rpx; /* 内容底部外边距 */
}

.rich-text {
  word-wrap: break-word; /* 强制换行 */
}

@media screen and (max-width: 375px) {
  .container {
    padding: 15rpx; /* 小屏幕适配 */
  }

  .article {
    padding: 15rpx; /* 小屏幕适配 */
  }
}
